<template>
    <div id="count">
        <div :class="{'navFixed':ScrollState}" ref="navbar" class="navbar">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">亲友统计</mt-tab-item>
                <mt-tab-item id="2">用户活跃</mt-tab-item>
            </mt-navbar>
        </div>
        <div @click="open">
            <mt-field label="起始时间" :readonly="true" placeholder="点击选择时间" state="warning" v-model.trim="startTime"></mt-field>
        </div>
        <div @click="open2">
            <mt-field label="结束时间" :readonly="true" placeholder="点击选择时间" state="warning" v-model.trim="endTime"></mt-field>
        </div>
        <div style="margin:10px 10px">
            <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
        </div>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div class="showResult lay" v-show="group_1.show">
                    <div class="showResultTitle">
                        查询结果
                    </div>
                    <div class="contentResult" style="paddingTop:0; background: #eee;">
                        <div class="record" :key="index" v-for="(item,index) in group_1.arr">
                            <div style="flex:3"><span class="title"><i class="iconfont icon-shijian4"></i> 时间</span><br/><span>{{(item.CreateTime).split(' ')[0]}}</span></div>
                            <div style="flex:2"><span class="title"><i class="iconfont icon-tongji"></i> 局数</span><br/><span>{{item.BoardCount}}</span></div>
                            <div style="flex:2"><span class="title"><i class="iconfont icon-zuanshi"></i> 钻石消耗</span><br/><span>{{item.Cost}}</span></div>
                        </div>
                        <div v-if="  group_1.arr.length==0">
                            无符合条件的数据
                        </div>
                        <div v-if="  group_1.arr.length>0">
                            <div style="margin:10px 10px">
                                <mt-button type="primary" size="large" @click.native="loadMore" v-if=" group_1.nextPage<  group_1.totalPages">加载更多</mt-button>
                                <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                            </div>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="showResult lay" v-show="group_2.show">
                    <div class="showResultTitle">
                        查询结果
                    </div>
                    <div class="contentResult">
                        <qin-you-view :key="index" v-for="(item,index) in group_2.arr">
                            <img :src="item.szHeadPicUrl.indexOf('http')!=-1?item.szHeadPicUrl:require('../../../assets/img/nopic.png')" slot="icon">
                            <div slot="content">
                                <p>开房人昵称 : <span class="time">{{item.CreateName}}</span></p>
                                <p>开房人Id : <span class="time">{{item.CreateUserID}}</span></p>
                                <p>游戏局数 : <span class="time">{{item.BoardCount}}</span></p>
                                <p>钻石消耗 : <span class="time">{{item.Cost}}</span></p>
                                <p>开房时间 : <span class="success">{{item.CreateTime}}</span></p>
                            </div>
                        </qin-you-view>
                        <div v-if="  group_2.arr.length==0">
                            无符合条件的数据
                        </div>
                        <div v-if="  group_2.arr.length>0">
                            <div style="margin:10px 10px">
                                <mt-button type="primary" size="large" @click.native="loadMore" v-if=" group_2.nextPage<  group_2.totalPages">加载更多</mt-button>
                                <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                            </div>
                        </div>
                    </div>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
        <mt-datetime-picker ref="picker" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="starttime" @confirm="handleConfirmS">
        </mt-datetime-picker>
        <mt-datetime-picker ref="pickerend" type="date" :startDate="startDate" :endDate="endDate" year-format="{value}年" month-format="{value}月" date-format="{value}日" v-model="endtime" @confirm="handleConfirmE">
        </mt-datetime-picker>
        <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
            {{msg}}
        </mt-popup>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    import QinYouView from '../../../components/QinyouView/QinYouView'
    export default {
        name: "count",
        components: {
            QinYouView
        },
        data() {
            return {
                selected: '1',
                ScrollState: false,
                startTime: "",
                endTime: "",
                tableId: "",
                startDate: new Date('2017-01-01'), //时间选择器最小的时间
                endDate: new Date(), //时间选择器最大时间
                popupVisible: false,
                starttime: 0,
                endtime: 0,
                msg: "",
                group_1: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0,
                    func: 'GetTotalCount',
                    show: false
                },
                group_2: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0,
                    func: 'GetHuoYueTotalCount',
                    show: false
                },
            }
        },
        methods: {
            open() {
                this.$refs.picker.open();
            },
            open2() {
                this.$refs.pickerend.open();
            },
            handleConfirmS(time) {
                this.starttime = time;
                this.startTime = this.formateTimeObj(time) + " 00:00:00";
            },
            handleConfirmE(time) {
                this.endtime = time;
                this.endTime = this.formateTimeObj(time) + " 23:59:59";
            },
            formateTimeObj: function(obj) {
                let Y = obj.getFullYear();
                let M = obj.getMonth() + 1;
                let D = obj.getDate();
                if (M < 10) {
                    M = "0" + M;
                }
                if (D < 10) {
                    D = "0" + D;
                }
                return `${Y}-${M}-${D}`;
            },
            loadMore() {
                let getData = {
                    params: {
                        'functionname': this[`group_${this.selected}`].func,
                        body: JSON.stringify({
                            startDate: this.startTime,
                            endDate: this.endTime,
                            pageIndex: this[`group_${this.selected}`].nextPage,
                            pageSize: this.PAGESIZE,
                            CreateUserID: parseInt(this.tableId == "" ? 0 : this.tableId)
                        })
                    }
                }
                //console.log(getData);
                this.getList(getData);
            },
            getList: function(getData) {
                this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
                    let data = response.data;
                    this.msg = data.msg;
                    // this.popupVisible = true;
                    // let that = this;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     clearTimeout(time);
                    // }, 3000);
                    this[`group_${this.selected}`].show = true;
                    if (data.code == 1) {
                        //
                        // 
                        let arr = data.body;
                       // console.log(arr);
                        if (this[`group_${this.selected}`].totalCount == 0) {
                            this[`group_${this.selected}`].nextPage = 1;
                            this[`group_${this.selected}`].arr = arr;
                        } else if (this[`group_${this.selected}`].totalCount > 0) {
                            this[`group_${this.selected}`].arr = this[`group_${this.selected}`].arr.concat(arr);
                            this[`group_${this.selected}`].nextPage = this[`group_${this.selected}`].nextPage + 1;
                        }
                        this[`group_${this.selected}`].totalPages = Math.ceil(data.totalCount / this.PAGESIZE);
                        this[`group_${this.selected}`].totalCount = data.totalCount;
                    } else {
                        MessageBox("提示", data.msg);
                    }
                })
            },
            search() {
                if (this.startTime == "") {
                    MessageBox("提示", "起始时间不能为空");
                    return false;
                }
                if (this.endTime == "") {
                    MessageBox("提示", "结束时间不能为空");
                    return false;
                }
                this[`group_${this.selected}`].totalCount = 0;
                this[`group_${this.selected}`].nextPage = 0;
                let getData = {
                    params: {
                        'functionname': this[`group_${this.selected}`].func,
                        body: JSON.stringify({
                            startDate: this.startTime,
                            endDate: this.endTime,
                            pageIndex: this[`group_${this.selected}`].nextPage,
                            pageSize: this.PAGESIZE,
                            CreateUserID: parseInt(this.tableId == "" ? 0 : this.tableId)
                        })
                    }
                }
                // console.log(getData);
                this.getList(getData)
            },
            initView() {
                let getData = {
                    params: {
                        'functionname': this[`group_${this.selected}`].func,
                        body: JSON.stringify({
                            startDate: "",
                            endDate: "",
                            pageIndex: this[`group_${this.selected}`].nextPage,
                            pageSize: this.PAGESIZE,
                            CreateUserID: 0
                        })
                    }
                }
                // console.log(getData);
                this.getList(getData)
            },
            handleScroll: function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop == 0) {
                    this.ScrollState = false;
                    document.getElementById('count').style.paddingTop = 0 + "px"
                }
                if (scrollTop > 0) {
                    document.getElementById('count').style.paddingTop = this.H + "px";
                    this.ScrollState = true;
                }
            }
        },
        created() {
            this.initView();
        },
        mounted() {
            document.body.style.background = "#fffbef";
            window.addEventListener("scroll", this.handleScroll);
            // Indicator.open({
            //   text: "加载中...",
            //   spinnerType: "fading-circle"
            // });
            this.$nextTick(() => {
                this.H = this.$refs.navbar.offsetHeight;
            });
        },
        destroyed() {
            window.removeEventListener("scroll", this.handleScroll);
        }
    }
</script>


<style lang="scss" scoped>
    .record {
        display: flex;
        text-align: left;
        margin-bottom: 20px;
        background: #fff;
        div {
            padding: 10px 0;
            padding-left: 5px;
            font-size: 12px;
            line-height: 2;
            color: #9e9e9e;
            .title {
                color: #634747;
            }
        }
    }
</style>
